<template>
    <div class="bg-white sticky top-0 left-0 z-10 dark:bg-zinc-900">
        <ul
            ref="ulTarget"
            class="flex relative overflow-x-auto p-1 text-xs text-zinc-600 overflow-hidden"
        >
            <!-- 滑块 -->
            <li
                ref="sliderTarget"
                :style="sliderStyle"
                class="absolute h-[24px] bg-zinc-900 rounded-lg duration-200 dark:bg-zinc-900"
            ></li>

            <!-- 汉堡svg图标 -->
            <li
                class="fixed top-0 right-[-1px] h-4 px-1 flex items-center bg-white z-20 shadow-l-white dark:bg-zinc-900 drak:shadow-l-zinc"
                @click="onShowPopup()"
            >
                <m-svg-icon
                    name="hamburger"
                    class="w-1.5 h-1.5"
                ></m-svg-icon>
            </li>

            <!-- last:mr-4  最后一个li 设置 margin-right：4  store中的数据在模板中可以使用$store获取-->
            <li
                v-for="(item, index) in $store.getters.categorys"
                :key="item.id"
                :ref="setItemRef"
                @click="onItemClick(index)"
                class="shrink-0 px-1.5 py-0.5 z-10 duration-200 last:mr-4"
                :class="{
                    ' text-zinc-100': currentCategoryIndex === index
                }"
            >
                {{ item.name }}
            </li>
        </ul>
        <m-popup v-model="isVisable">
            <menu-vue
                :categorys="$store.getters.categorys"
                @onItemClick="onItemClick"
            />
        </m-popup>
    </div>
</template>

<script setup>
import { useScroll } from '@vueuse/core'
import { onBeforeUpdate, ref, watch } from 'vue'
import menuVue from '../../menu/index.vue'

const sliderStyle = ref({
    transform: 'translateX(0px)',
    width: '52px'
})

//1、选中 item 下标
const currentCategoryIndex = ref(0)
//2、获取所有的items元素  循环出来的, el是绑定的当前的元素
let itemRefs = []
const setItemRef = (el) => {
    if (el) {
        itemRefs.push(el)
    }
}
// 数据改变之后，Dom 变化之前 清空 itemRefs  因为每次dom改变都会触发上述方法 需要清空
onBeforeUpdate(() => {
    itemRefs = []
})

//3、获取滚动的距离，需要获取ul元素， 通过vueuse 中的 useScroll 获取响应式的scroll 滚动距离  ul 的 x轴滚动的距离
const ulTarget = ref(null)
let { x: ulScrollLeft } = useScroll(ulTarget)

//4、监听选中脚标的变化，计算滑块的距离 getBoundingClientRect() 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
watch(currentCategoryIndex, async (val) => {
    // console.log(ulScrollLeft, 'ulScrollLeft', ulScrollLeft.value)
    let ulScrollLeft = ulTarget.value.scrollLeft
    const { left, width } = itemRefs[val].getBoundingClientRect()
    // 滑块的位置 = ul 横向滚动的位置 + 当前元素的left - ul的padding 左10
    sliderStyle.value = {
        transform: `translateX(${ulScrollLeft + left - 10}px)`,
        width: width + 'px'
    }
})

//更改currentCategoryIndex
const onItemClick = (index) => {
    currentCategoryIndex.value = index
    isVisable.value = false
    itemRefs[index].scrollIntoView({ behavior: 'instant', block: 'center', inline: 'center' })
}

//展示弹窗
const isVisable = ref(false)
const onShowPopup = () => {
    isVisable.value = true
}
</script>
<style lang="scss" scope></style>
